<!--  -->
<template>
  <div class="rec_wrap">
    <div class="header">
      最近播放
      <span>共100首</span>
    </div>
    <div class="musicList">
      <div class="list_wrap">
        <div class="item_wrap">
          <div
            @dblclick="startSong(item.song)"
            v-for="(item, index) in playList"
            :key="index"
            class="item"
          >
            <div @click="toAlbum(item.song.al.id)" class="cover">
              <img :src="item.song.al.picUrl" alt="" />
            </div>
            <div class="info">
              <div
                :class="{ active_position: item.song.id === songId }"
                class="name"
              >
                {{ item.song.name }}
              </div>
              <div class="creator_name">{{ item.song.ar[0].name }}</div>
            </div>
            <div class="album">{{ item.song.al.name }}</div>
            <div class="timer">
              {{ Math.floor(item.song.dt / 1000) | timeFormat }}
            </div>
            <div class="btn">
              <div
                @click="download(item.song.id, item.song.name)"
                class="iconfont icon-yunduanxiazai load"
              ></div>
            </div>
            <div class="mv">
              <el-button
                @click="toDetail(item.song.mv)"
                size="mini"
                v-if="item.song.mv != 0"
                type="primary"
                >mv</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRecommendPlay } from "util/video";
import { getMusicUrl } from "util/findMusic";

import { mapGetters, mapMutations, mapActions } from "vuex";

export default {
  name: "",
  data() {
    return {
      id: "",
      playList: [],
    };
  },
  watch: {
    songId(newValue, oldValue) {
      // console.log(newValue);
      // console.log(oldValue);
      this.$store.dispatch("musicPlay/saveHasPlayList", newValue);
    },
  },
  created() {
    //   let userinfo = JSON.parse(sessionStorage.getItem("userinfo"))
    //   console.log(userinfo);
    this.getRecommendPlay();
  },
  computed: {
    ...mapGetters("userInfo", [
      //用户歌单
      "userinfo",
    ]),
    ...mapGetters("musicPlay", ["songId"]),
  },
  methods: {
    async getRecommendPlay() {
      // console.log(this.userinfo);
      let id = this.userinfo.userId;
      let {
        data: { allData },
      } = await getRecommendPlay(id);
      this.playList = allData;
      // console.log(allData);
    },
    //播放歌曲
    startSong(musicDetail, index) {
      // console.log(this.songListId);

      this.$store.dispatch("musicPlay/saveIsPlaying", true);

      //保存当前歌曲id
      this.$store.dispatch("musicPlay/saveSongId", musicDetail.id);
    },

    toDetail(id) {
      this.$store.dispatch("musicPlay/saveIsPlaying", false);
      this.$router.push("/mvDetail/" + id);
    },
        //跳转去专辑
    toAlbum(id) {
      this.$router.push("/albumDetail/" + id);
    },
  },
};
</script>

<style scoped lang='less'>
.rec_wrap {
  .header {
    padding: 20px 40px;
    font-size: 22px;
    font-weight: 600;
    span {
      font-size: 16px;
      font-weight: normal;
      margin-left: 10px;
      color: #9f9f9f;
    }
  }
  .musicList {
    padding: 0 5.25rem;
    .list_wrap {
      // width: 80%;
      .item_wrap {
        .item {
          background-color: #fff;
          height: 40px;
          padding: 10px 0;
          display: flex;
          align-items: center;
          border-radius: 10px;
          .cover {
            margin: 0 10px;
            width: 45px;
            height: 45px;
            border-radius: 5px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 5px;
              box-shadow: 2px 2px 12px 4px rgba(0, 0, 0, 0.1);
            }
          }
          .info {
            margin-left: 10px;
            width: 30%;
            .name {
              width: 100%;
              font-weight: 600;
              font-size: 17px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .creator_name {
              color: #525252;
              font-size: 13px;
            }
            .active_position {
              color: #335eea;
            }
          }
          .album {
            color: #525252;
            width: 30%;
            font-size: 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .timer {
            margin-left: 5px;
            color: #525252;
            font-size: 15px;
          }
          .btn {
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: center;
            div {
              display: none;
              margin-left: 20px;
            }
            div:hover {
              transform: scale(1.1);
            }
            .like {
              font-size: 23px;
            }
          }
          .mv {
            width: 8%;
            text-align: right;
            margin-right: 10px;
            &:hover .el-button {
              transform: scale(1.1);
            }
            .el-button {
              background-color: #fff;
              color: rgb(16, 24, 134);
              font-weight: 600;
              border: none;
              border-radius: 5px;
            }
          }
        }
        .item:hover {
          background-color: #f6f6f8;
        }
        .item:hover .btn div {
          display: block;
        }
      }
    }
  }

  .el-icon-video-camera {
    font-size: 17px;
    margin-left: 5px;
    color: rgb(25, 189, 189);
    font-weight: 600;
  }
  .el-icon-video-camera:hover {
    color: red;
  }
}
.active_position {
  color: crimson;
}
.music_name_wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
</style>